<template>
	<view class="">
		<view class="head_main" style="background-image:linear-gradient(to right,#00828A, #4CA7AD);">
			<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;z-index: 999;">
				<u-icon name="https://resourse.cnlhjt.com/upload/20220825/5c79408ff429accec2963bc803c91a90.png" label="龙庭社圈" labelColor="#fff" space="6">
				</u-icon>
			</view>
		</view>
		<view style="height:155rpx;"></view>
		<view class="wrap" style="background-color:#f8f8f8;">
			<view style="height: 10rpx;"></view>
			<!-- 热门话题 -->
			<view class="uni-flex-center" v-if="isDynamic==true">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view style="display: flex; ">
							<u-image :src="appTitle.rmht" width="80" height="30" mode="aspectFit"></u-image>
							<text
								style="color: #999999; font-weight: 400;font-size: 28rpx; line-height: 56rpx;text-align: right; width:100%;"
								@click="moreTopic">更多
								<!-- <u-icon style="display: inline-block !important;" name="arrow-right" color="#999999" size="14"></u-icon> -->
							</text>
						</view>
					</view>
					<view class="user-list" style="padding: 0;border-radius: 20rpx;margin-top:10rpx;">
						<view class="user-list-cell" style="margin:0;">
							<view class="item" style="display: static;" v-for="(item, index) in hot" :key="index">
								<view class="icon" @click="topic(item)"
									style="position: relative;height: 105px;width: 105px;">
									<u-icon width="105" height="105" :name="item.icon"
										:customStyle="{borderRadius: '20rpx', zIndex: '1', position: 'absolute', top: '0rpx'}">
									</u-icon>
									<u-image src="https://resourse.cnlhjt.com/upload/20220825/0e0730a4fd0e419f9bd56f64d4e5b48d.png" width="105" height="105"
										mode="widthFix"
										:customStyle="{position: 'absolute', bottom: '0px', zIndex: '9', borderBottomLeftRadius: '20rpx', borderBottomRightRadius: '20rpx'}">
									</u-image>

									<view
										style="color: #fff; width: 100%; font-size: 28rpx; font-weight: 500; text-align: center;z-index: 10;position: absolute;bottom: 10rpx;">
										#{{item.name}}</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 热门活动 -->
			<view class="uni-flex-center" style="margin-top: 15rpx;" v-if="ishotActive">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view style="display: flex; ">
							<u-image :src="appTitle.rmhd" width="80" height="30" mode="aspectFit"></u-image>
							
						</view>
					</view>
					<u-swiper :list="hotActive" @click="clickActive" @change="change" keyName="image" showTitle circular
						height="140">
					</u-swiper>
				</view>
			</view>

			<!-- 其他活动 -->
			<view class="uni-flex-center" style="margin-top: 15rpx;">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view style="display: flex; ">
							<u-image :src="appTitle.syhd" width="80" height="30" mode="aspectFit"></u-image>
							<text
								style="color: #999999; font-weight: 400;font-size: 28rpx; line-height: 56rpx;text-align: right; width:100%;"
								@click="moreOther">更多
								<!-- <u-icon style="display: inline-block !important;" name="arrow-right" color="#999999" size="14"></u-icon> -->
							</text>
						</view>
					</view>
					<!-- <u-line></u-line> -->
					<view class="user-list"
						style="background-color:#fff;padding:10rpx;border-radius: 20rpx;margin-top:10rpx;">
						<view class="">
							<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无活动~" :show="showEmpty">
							</u-empty>
							<view class="a_list u-flex u-row-between" v-for="(item, index) in active" :key="index" @click="activeDetail(item.id,item.status)">
								<view class="a_left_con u-rela">
									<view class="a_title">
										<text>{{item.title}}</text>
									</view>
									<view class="a_sponsor">主办方：{{item.sponsor}}</view>
									<view class="a_address">活动地址：{{item.address}}</view>
									<view class="a_limit" v-if="item.limit == 0">参与人数：<text style="color:#0B868E;">{{item.join}}</text>/不限</view>
									<view class="a_limit" v-else>参与人数：<text style="color:#0B868E;">{{item.join}}</text>/{{item.limit}}</view>
									<view class="u-flex u-row-between" style="margin-top:20rpx;">
										<text class="a_time">{{item.time}}</text>
										<text class="a_free" v-if="item.free == 0">免费</text>
										<text class="a_free" v-else>￥{{item.price}}/人</text>
									</view>
									<view v-if="item.status == -1" class="a_status">
										<u-image width="120rpx" height="120rpx"
											src="https://resourse.cnlhjt.com/upload/20220825/23a08670c569a7ed00a0f6cc135c250b.png">
										</u-image>
									</view>
								</view>
								<image class="a_img" mode="aspectFill" :src="item.image"></image>
								
							</view>		
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getList,
		getTopic
	} from "@/service/communitService.js";
	import {
		getHomeNav
	} from "@/service/configService.js";
	export default {
		data() {
			return {
				appTitle: this.$store.state.appTitle,
				hot: [],
				hotActive: [],
				active: [],
				page: 1,
				limit: 3,
				currentNum: 0,
				isDynamic: false,
				
				ishotActive:false,
				showEmpty:false
			}
		},
		mounted() {
			getList({
				is_hot: 0,
				page: 1,
				limit: 3
			}).then(this.getActive);
			getList({
				is_hot: 1,
				page: 1,
				limit: 3
			}).then(this.getHotActive);

			getTopic({
				page: this.page,
				limit: this.limit
			}).then(this.getTopic);
		},
		methods: {
			getTopic(e) {
				if (e.code == 200) {
					this.isDynamic = true
					this.hot = e.result;
				} else {
					this.isDynamic = false;
				}
			},
			getActive(e) {
				if (e.code == 200) {
					this.active = e.result;
					this.showEmpty=false;
				}else{
					this.showEmpty=true;
				}
			},
			getHotActive(e) {
				if (e.code == 200) {
					this.hotActive = e.result;
					this.ishotActive=true;
				}else{
					this.ishotActive=false
				}
			},
			clickActive(e) {
				let item = this.hotActive[e];
				// console.log(item);
				this.activeDetail(item.id, item.status);
			},
			moreOther() {
				this.$u.route({
					url: "/pagesCommunity/index/other-active",
					params: {

					}
				})
			},
			activeDetail(id, status) {
				if (status == -1) {
					uni.showToast({
						title: '活动已结束',
						icon: "error"
					});
					return;
				}
				this.$u.route({
					url: "/pagesCommunity/index/active-detail",
					params: {
						gid: id
					}
				})
			},
			topic(item) {
				this.$u.route({
					url: '/pagesCommunity/index/topic-hot',
					params: {
						item: JSON.stringify(item)
					}
				})
			},
			moreTopic() {
				this.$u.route({
					url: '/pagesCommunity/index/topic-more',
					params: {

					}
				})
			},
			change(index) {
				this.currentNum = index.current;
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.content{
		background-color: transparent !important;
	}
	.head_main{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index:999;
	}
	.main-service {
		background-color: transparent;
		box-shadow: none;
	}

	.main-service .title {
		padding-left: 0;
		background-position: 0% 85%;
	}

	.wrap {
		width: 94%;
		padding-left: 3%;
		padding-right: 3%;
		padding-bottom: 20rpx;
	}

	.iconType {
		display: flex;
		padding: 10rpx 10rpx;
		background-color: #fefefe;
		justify-content: space-between;
	}

	.icon {
		height: auto;
	}

	.item {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		color: #13227a;
		font-size: 28rpx;
	}

	.indicator-num {
		padding: 2px 5rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 20px;
		@include flex;
		justify-content: space-between;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	.a_list{
		padding:15rpx 10rpx;
		border-bottom:1rpx solid #ddd;
		.a_left_con{
			width:58%;
			.a_title{
				margin-bottom:20rpx;
			}
			.a_title text{
				font-size: 22rpx; font-weight: 600; padding: 10rpx 22rpx; color: #fff; 
				font-family: Arial, Helvetica, sans-serif;
				background-image: url('https://resourse.cnlhjt.com/upload/20220825/605402e1cc43dd5e1964b57f5ea66b8c.png');
				background-size: 100% 100%;
			}
			.a_sponsor,.a_address,.a_limit{
				font-size: 22rpx; color: #666;
				margin-top:10rpx;
			}
			.a_time{
				font-size: 24rpx;color:#82848A;
			}
			.a_free{
				font-size: 30rpx;color: red;font-weight: bold;
			}
		}
		.a_img{
			width:40%;
			height:240rpx;
			border-radius: 20rpx;
		}
		.a_status{
			position: absolute;
			top:0rpx;
			right:20rpx;
		}
	}
	.a_list:last-child{
		border:none;
	}
</style>
